<template>
  <page-wrap back hide-tab title="面试详情" stayStill class="page">
    <view class="interview">
      <view :class="['interview-top', { 'not-company': !isCompany }]">
        <view class="section cinfo">
          <view class="cinfo-left">
            <view class="cname">
              <text>{{ isCompany? detailInfo.person_name: detailInfo.company_name }}</text>
            </view>
            <view class="text">
              <text>面试岗位： </text
              ><text class="zw-name">{{ detailInfo.zw_name }}</text>
            </view>
            <view class="text">
              <text>面试邀请状态：</text
              ><text :class="'status-' + detailInfo.interview_status">{{
                detailInfo.interview_status_desc
              }}</text>
            </view>
          </view>
          <view class="cinfo-logo">
            <u-image
              width="140rpx"
              height="140rpx"
              :src="isCompany? detailInfo.person_pic: detailInfo.company_logo"
              border-radius="50%"
              class="logo"
            ></u-image>
          </view>
        </view>
        <view class="section interview-info">
          <view class="section-title"><text>面试信息</text></view>
          <view class="row time">
            <view class="row-left">
              <text class="icon icon-time"></text>
              <text>面试时间：</text>
            </view>
            <view class="row-right">
              <text>{{ detailInfo.mianshi_time }}</text>
            </view>
          </view>
          <view class="row address">
            <view class="row-left">
              <text class="icon icon-address"></text>
              <text>面试地点：</text>
            </view>
            <view class="row-right">
              <text>{{ detailInfo.mianshi_address }}</text>
            </view>
          </view>
        </view>
        <view class="section remark">
          <view class="section-title"><text>备注</text></view>
          <view class="remark-text">
            <text>{{ detailInfo.mailtext }}</text>
          </view>
        </view>
        <view v-if="!isCompany" class="king-kong">
          <view
            class="king-kong-item"
            v-for="(item, index) in optionList"
            :key="index"
            @click="handleKingKongClick(item)"
          >
            <view class="item-left">
              <view class="title"
                ><text>{{ item.title }}</text></view
              >
              <view class="label"
                ><text>{{ item.label }}</text></view
              >
            </view>
            <view class="item-right">
              <u-image
                width="90rpx"
                height="90rpx"
                :src="item.img"
                border-radius="50%"
                class="item-img"
              ></u-image>
            </view>
          </view>
        </view>
      </view>

      <view class="interview-bottom" v-if="detailInfo.interview_status == 0">
        <view class="btn btn-reject" @click="handleRejuctBtnClick">拒绝</view>
        <view class="btn btn-accept" @click="handleAcceptBtnClick">接受</view>
      </view>
      <view class="interview-bottom company" v-if="isCompany">
        <view class="btn btn-chat" @click="handleChat">立即沟通</view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import {
  getInterviewDetail,
  rejectInterview,
  acceptInterview,
} from "@/api/index";
import IMEventHandler from "@/utils/im";

export default {
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyImId: "",
      isCompany: uni.getStorageSync("login-status") == "company",
      pmailId: "",
      detailInfo: {},
      selfInfo: getApp().globalData.imInfo,
      optionList: [
        {
          type: "job",
          title: "职位详情",
          label: "查看应聘职位",
          path: "",
          img: this.$imgBase + "interview/position.png",
        },
        {
          type: "company",
          title: "公司详情",
          label: "查看公司主页",
          path: "",
          img: this.$imgBase + "interview/company.png",
        },
        {
          type: "chat",
          title: "立即沟通",
          label: "发消息聊天沟通",
          path: "",
          img: this.$imgBase + "interview/msg.png",
        },
        {
          type: "phone",
          title: "拨打电话",
          label: "即时电话沟通",
          path: "",
          img: this.$imgBase + "interview/phone.png",
        },
      ],
    };
  },
  onLoad(opt) {
    this.pmailId = opt.id;
    this.getDetail();
    this.imLogin()
  },
  created() {
    this.$bus.$on("LOGIN_SUCCESS", () => {
      this.selfInfo = getApp().globalData.imInfo;
    });
  },
  methods: {
    imLogin() {
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        new IMEventHandler();
      }
    },
    getDetail() {
      let params = {
        pmail_id: this.pmailId,
        conditionArr: JSON.stringify({
          isGetPinfo: "1",
          isGetCinfo: "1",
        }),
      };
      getInterviewDetail(params).then((res) => {
        if (res) {
          this.detailInfo = res.info;
        }
      });
    },
    handleKingKongClick(item) {
      let type = item.type;
      if(!this.detailInfo) {
        return uni.showToast({
          title: '暂无企业信息',
          icon: 'none'
        })
      }
      switch(type) {
        case 'job':
          uni.navigateTo({
            url: '/pagesSub/public/jobDetail/index?jobId=' + this.detailInfo.zw_id
          })
          break
        case 'company':
          uni.navigateTo({
            url: '/pagesSub/public/companyDetail/index?companyId=' + this.detailInfo.company_id
          })
          break
        case 'chat':
          if(!this.detailInfo.company_im_id) {
            return uni.showToast({
              title: '该企业暂不支持沟通',
              icon: 'none',
            })
          }
          uni.navigateTo({
            url: '/pagesSub/message/chat/index?chatId=' + this.detailInfo.company_im_id,
          })
          break
        case 'phone':
          uni.makePhoneCall({
            phoneNumber: this.detailInfo.contact_mobile,
          });
          break
      }
    },
    handleRejuctBtnClick() {
      uni.showModal({
        title: "拒绝面试",
        content: "您确定拒绝该面试吗？",
        success: (res) => {
          if (res.confirm) {
            this.handleRejuct();
          }
        },
      });
    },
    // 拒绝面试
    handleRejuct() {
      let params = {
        pmail_id: this.pmailId,
        conditionArr: JSON.stringify({
          rejectText: "",
        }),
      };
      rejectInterview(params).then((res) => {
        if (res.code == 200) {
          this.sendInterviewMsg(3)
          uni.showToast({
            icon: "none",
            title: "已拒绝",
          });
          this.getDetail();
          this.setPrePageInit()
        } else {
          uni.showToast({
            icon: "none",
            title: res.status_desc,
          });
        }
      });
    },
    handleAcceptBtnClick() {
      uni.showModal({
        title: "接受面试",
        content: "您确定接受该面试吗？",
        success: (res) => {
          if (res.confirm) {
            this.handleAccept();
          }
        },
      });
    },
    // 接受面试
    handleAccept() {
      let params = {
        pmail_id: this.pmailId,
        conditionArr: JSON.stringify({
          rejectText: "",
        }),
      };
      acceptInterview(params).then((res) => {
        if (res.code == 200) {
          this.sendInterviewMsg(2)
          uni.showToast({
            icon: "none",
            title: "已接受",
          });
          this.getDetail();
          this.setPrePageInit()
        } else {
          uni.showToast({
            icon: "none",
            title: res.status_desc,
          });
        }
      });
    },
    // 发送面试消息
    sendInterviewMsg(state) {
      if(!this.detailInfo.company_im_id) return
      
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        new IMEventHandler(() => {
          uni.hideLoading();
          this.sendInterviewMsg(state);
        });
        return uni.showLoading({
          title: "正在连接",
          mask: true,
        });
      }
      if (!state) {
        return uni.showToast({
          icon: "none",
          title: "发送面试类型不能为空",
        });
      }
      let params = {
        target_username: this.detailInfo.company_im_id,
        content: JSON.stringify({
          send_uid: this.selfInfo.uname,
          receive_uid: this.detailInfo.company_im_id,
          content: "[面试邀请]",
          share: {
            type: 70,
            slave: {
              state: state
            },
          },
          person_iname: this.selfInfo.nickname,
          person_pic: this.selfInfo.pic,
          is_send: "1",
          idate: new Date().getTime(),
        }),
        no_offline: false,
        no_notification: false,
        custom_notification: {
          enabled: true,
          title: this.selfInfo.nickname,
          alert: '[面试邀请]',
        },
        need_receipt: true,
      };
      getApp()
        .globalData.tim.sendSingleMsg(params)
        .onSuccess((data, msg) => {
        })
        .onFail((res) => {
          uni.showToast({
            icon: "none",
            title: "消息发送失败",
          });
        });
    },
    setPrePageInit() {
      let pages = getCurrentPages();    // 获取当前页面栈
      let prePage = pages[pages.length - 2];    // 上一个页面
      prePage.data.init = true    // 上一个页面 init 为true
    },
    handleChat() {
      let chatId = this.detailInfo.company_im_id
      if(this.isCompany) {
        chatId = this.detailInfo.person_id
      }
      uni.navigateTo({
        url: '/pagesSub/message/chat/index?chatId=' + chatId,
      })
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-interview: $img-base + "interview/";
.interview {
  &-top {
    padding: $uni-spacing-col-big $uni-spacing-col-big 0;
    &.not-company {
      padding-bottom: 144rpx;
    }
  }
  .section {
    margin-bottom: $uni-spacing-col-big;
    padding: $uni-spacing-col-big;
    background-color: #fff;
    border-radius: 10rpx;
    &-title {
      color: $uni-text-color-333;
      margin-bottom: $uni-spacing-col-lg;
      &::before {
        position: relative;
        top: 2rpx;
        content: "";
        display: inline-block;
        width: 8rpx;
        height: 26rpx;
        margin-right: 16rpx;
        border-radius: 10rpx;
        background-color: $u-type-primary;
      }
    }
  }
  .cinfo {
    display: flex;
    justify-content: space-between;

    .cname {
      margin-bottom: $uni-spacing-col-lg;
      font-size: 34rpx;
      color: #000;
    }
    .text {
      margin-bottom: $uni-spacing-col-lg;
      font-size: $uni-font-size-base;
      line-height: 1;
      color: $uni-text-color-999;
      &:last-of-type {
        margin: 0;
      }

      .zw-name {
        color: $uni-text-color-333;
      }
    }
  }

  .interview-info {
    .row {
      display: flex;
      margin-bottom: $uni-spacing-col-lg;
      color: $uni-text-color-999;
      &:last-of-type {
        margin: 0;
      }
      &-left {
        flex-shrink: 0;
      }
      .icon {
        width: 28rpx;
        height: 28rpx;
        margin-top: -4rpx;
        margin-right: 8rpx;
      }
      .icon-time {
        background-image: url($img-base-interview + "time.png");
      }
      .icon-address {
        background-image: url($img-base-interview + "region.png");
      }
      &-right {
        color: $uni-text-color-333;
      }
    }
  }
  .remark-text {
    color: $uni-text-color-333;
  }
  .king-kong {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    &-item {
      display: flex;
      justify-content: space-between;
      width: 327rpx;
      padding: 24rpx;
      background-color: $uni-bg-color;
      margin-bottom: $uni-spacing-col-big;
      border-radius: 10rpx;
      .item-left {
        .title {
          margin-bottom: 10rpx;
          font-size: $uni-font-size-base;
          color: $uni-text-color-333;
        }
        .label {
          font-size: $uni-font-size-min;
          color: $uni-text-color-999;
        }
      }
    }
  }
  &-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    width: 100vw;
    background-color: $uni-bg-color;
    &.company {
      background-color: transparent;
    }
    .btn {
      width: 178rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      border-radius: 10rpx;
    }
    .btn-reject {
      color: $u-type-primary;
      border: 2rpx solid $u-type-primary;
    }
    .btn-accept {
      width: 478rpx;
      margin-left: 30rpx;
      color: #fff;
      background: $bg-linear-gradient-button;
    }
    .btn-chat {
      width: 100%;
      color: #FFF;
      background: $bg-linear-gradient-button;
    }
  }

  .status-40 {
    color: $uni-text-color-888;
  }

  .status-0 {
    color: #0083ff;
  }

  .status-30 {
    color: $uni-text-color-warn;
  }

  .status-100 {
    color: $uni-text-color-success;
  }

  .status-50 {
    color: $uni-text-color-error;
  }
}
</style>